import {designPage} from "@peryl/react-compose";
import {useTableOption} from "../../modules/plain-design/useTableOption";
import {$file, AutoTable, PageCard, PageCardContent, Plc, PlcImage, PlcInput, PlcNumber, PlcOv, PlcTextarea, Tab, TabGroup} from "plain-design";
import {pathJoin} from "@peryl/utils/pathJoin";
import {env} from "../../env";

export default designPage(() => {

  const prodOption = useTableOption({
    url: '/product',
    showRows: 5,
    // bodyRowHeight: 80,
  });

  const imgOption = useTableOption({
    url: '/upload',
    showRows: 5,
    parentOption: prodOption,
    parentMap: { headId: 'id' },
    param: { queries: [{ field: 'attr1', value: 'prod_detail_image', operator: '=' }] },
    permit: {
      show: {
        update: false,
        codes: {
          'inner-copy': false,
          'outer-insert': false,
        },
      }
    },
    buttons: [
      {
        label: '新建',
        code: 'upload',
        type: 'insert',
        seq: 0,
        position: 'outer',
        disabled: () => !prodOption.state.getTable()?.current.getNode()?.data,
        handler: () => newImageRecord('prod_detail_image')
      }
    ],
  });

  const newImageRecord = async (type: string) => {
    const imageFiles = await $file.chooseImage(true);
    const data = (await prodOption.methods.utils.getCurrentNode()).data;
    await new Promise<void>((resolve, reject) => {
      $file.upload({
        action: pathJoin(env.baseURL, 'saveFiles'),
        file: imageFiles,
        filename: 'file',
        data: { headId: data.id, attr1: type },
        onSuccess: () => resolve(),
        onError: () => reject(),
      });
    });
    await imgOption.methods.pageMethods.reload();
  };

  return () => (
    <>
      <AutoTable option={prodOption}>
        <PlcImage title="商品图片" field="pictureUrl" imgKeyField="pictureId"/>
        <Plc title="商品编号" field="id" link/>
        <PlcInput title="商品名称" field="name" required overflowTooltip width={300}/>
        <PlcNumber title="商品价格" field="price"/>
        <PlcOv title="商品性别偏好" field="gender" ov="PRODUCT_GENDER"/>
        <PlcOv title="商品类别" field="productCategory" ov="PRODUCT_CATEGORY"/>
        <PlcOv title="商品所属品牌" field="brand" ov="PRODUCT_BRAND"/>
        <PlcOv title="商品运动类型" field="motionCategory" ov="PRODUCT_MOTION"/>
        <PlcOv title="商品颜色" field="color" ov="PRODUCT_COLOR"/>
      </AutoTable>
      <TabGroup>
        <Tab title="商品展示图片">
          <AutoTable option={imgOption}>
            <PlcImage title="图片" field="path"/>
            <PlcTextarea title="地址" field="path"/>
          </AutoTable>
        </Tab>
        <Tab title="商品详情图片">
          <PageCard>
            <PageCardContent>图片。。。</PageCardContent>
            <PageCardContent>图片。。。</PageCardContent>
          </PageCard>
          <PageCard>
            <PageCardContent>图片。。。</PageCardContent>
            <PageCardContent>图片。。。</PageCardContent>
          </PageCard>
        </Tab>
        <Tab title="优惠券">
          <PageCard>
            <PageCardContent>优惠券。。。</PageCardContent>
            <PageCardContent>优惠券。。。</PageCardContent>
          </PageCard>
          <PageCard>
            <PageCardContent>优惠券。。。</PageCardContent>
            <PageCardContent>优惠券。。。</PageCardContent>
          </PageCard>
        </Tab>
      </TabGroup>
    </>
  );
});
